import React, { useRef, useState } from 'react'

// 它可以做到组件多次渲染之间进行状态共享（类似于全局变量，和全局变量不同的是：即便多个组件实例也不会相互影响）
export default function Child() {
  // timer 是一个对象
  // #1 创建一个 useRef 引用，null 就表示初始的 timer.current 值
  const timer = useRef(null)
  const [count, setCount] = useState(10)
  const handleClick = () => {
    // #2 清除 timer.current
    clearInterval(timer.current)
    // #3 timer.current = setInterval
    timer.current = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
  }
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>开始倒计时</button>
    </div>
  )
}
